<script lang="ts">
import { Swiper} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    name: "YumaSwiper",
    props:{
        //是否循环不间断切换
        loop:{
            type:Boolean,
            default:true
        },
        //自动播放配置
        autoplay:{
            type:Object,
            default(){
                return {
                    delay: 2500,// 自动轮播的时间
                    disableOnInteraction: false,// true:如果点击了小圆点或左右两侧的按钮，不会自动播放
                }
            }
        },
        //左侧,右侧按钮
        nextEl:{
            type:String,
            default:'.swiper-button-next'
        },
        prevEl:{
            type:String,
            default:'.swiper-button-prev'
        }
    },
    components: {
        Swiper,
    },
    data(){
        return {
            swiperOption: {
                loop: this.loop,// 不间断播放
                spaceBetween: 0,// 两张图片的间距
                centeredSlides: true,
                autoplay: this.autoplay,
                pagination: {
                    // 呈现小圆点的位置
                    el: '.swiper-pagination',
                    // 点击小圆点是否进行切换
                    clickable: true
                },
                navigation: {
                    nextEl: this.nextEl,// 右侧按钮
                    prevEl: this.prevEl,// 左侧按钮
                }
            }
        }
    }
}
</script>

<template>
    <div class="swiper-container" id="mySwiper">
        <swiper class="swiper" :options="swiperOption">
            <slot></slot>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<style scoped lang="less">

</style>
